async/await 是基於 Promises 的語法糖，讓開發以同步的方式寫非同步，更容易理解和使用。

async：非同步
await：等待

以下是整個 async/await 架構

async 函數的使用

async 函數是一個傳回 Promise 的函數。
使用 async 關鍵字定義函數，使得函數內部的非同步程式碼可以使用 await 關鍵字來等待非同步操作的完成；async 函數的回傳值是一個 Promise，即使傳回的值是一個普通值，它也會自動封裝成一個 Promise。

// 定義 async 函數
async function fetchData() {
  return "Data fetched";
}

// 呼叫 async 函數
fetchData().then((result) => {
  console.log(result);         // Data fetched
});

await 的應用與錯誤處理

await 的應用
await 關鍵字只能在 async 函數內部使用。
await 會暫停 async 函數的執行，直到 Promise 完成，並且傳回 Promise 的結果，如果 Promise 被拒絕，則會拋出錯誤。

async function fetchData() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data fetched"), 1000);
  });
  console.log(result);        // Data fetched
}

fetchData();

錯誤處理
處理非同步操作中的錯誤時，可以使用 try/catch 語句區塊來擷取 await 語句中的錯誤。

function fetchData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("Error fetching data");
      }, 1000);
    });
  }
  
  async function handleData() {
    try {
      const message = await fetchData();
  
      console.log(message);
    } catch (error) {
      console.error(error); // Error fetching data
    }
  }
  
  handleData();

async/await 實際應用

串聯等待
正如前面介紹的內容 await 這個關鍵字只能在 async 函數內使用。
所以可以運用在等待一個 Promise 解決或拒絕，並在 Promise 解決後繼續執行後面的程式碼，也就是可以埋很多個 await 避免回調地獄，讓程式碼更直觀。

async function getData(url) {
  try {
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData("https://randomuser.me/api/");

運用 Promise.all 同時啟動非同步
Promise.all 是用來同時處理多個 Promise 的方法，它接受一個 Promise 陣列，並返回一個新的 Promise，這個新的 Promise 會在所有傳入的 Promise 都解決後解決。
如果其中一個 Promise 被拒絕，那麼 Promise.all 會立即拒絕。

async function fetchDataParallel() {
  const promise1 = new Promise((resolve) =>
    setTimeout(() => resolve("First data"), 1000)
  );
  const promise2 = new Promise((resolve) =>
    setTimeout(() => resolve("Second data"), 1000)
  );

  const [result1, result2] = await Promise.all([promise1, promise2]);
  console.log(result1); // First data
  console.log(result2); // Second data
}

fetchDataParallel();

補充說明：async/await vs Promise 差異

• Promise：調用 then 方法來處理成功的情況，並使用 catch 方法來處理錯誤。
• async/ await：使用 await 關鍵字來等待 Promise 的解決，並使用 try...catch 來處理錯誤。

  🔔 回顧：
  第 9 天：非同步程式設計 - Promises的 error handle